<%@ Page
    Language="C#"
    MasterPageFile="~/DefaultMaster.master"
    AutoEventWireup="true"
    Inherits="CommonPage"
    Title="ButtonMenu Sample"    
    Theme="SampleSiteTheme"%>

<asp:Content ContentPlaceHolderID="SampleContent" Runat="Server">
    
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />

    
    <div class="demoarea">
        <div class="demoheading">ButtonMenu Demonstration</div>
    
        <asp:Button ID="Button2" runat="server" Text="PostBack" />
        
        <asp:Menu ID="Menu1" runat="server" Orientation="Vertical" BorderWidth="1px" BorderColor="Black"
            style="display:none" BackColor="WhiteSmoke" >
            <Items>
            <asp:MenuItem Text="Item1"></asp:MenuItem>
            <asp:MenuItem Text="Item2">
                <asp:MenuItem Text="Item21"></asp:MenuItem>
                <asp:MenuItem Text="Item22"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Item3"></asp:MenuItem>
            </Items>
        </asp:Menu>
                
        <asp:Button ID="Button1" runat="server" Text="Show Menu" />
      
        <myajaxToolkit:ButtonMenu runat="server" ParentElementID="Button1" TargetControlID="Menu1"
            PositioningMode="BottomLeft" BehaviorID="PopupEx">
<%--            <Animations>
                <OnShow>
                    <Sequence>
                        <OpacityAction Opacity="0" />
                        <Parallel Duration=".4">
                            <FadeIn />
                        </Parallel>
                    </Sequence>                    
                </OnShow>
                <OnHide>
                    <Parallel Duration=".4">
                        <FadeOut />
                    </Parallel>
                </OnHide>                
            </Animations>--%>
        </myajaxToolkit:ButtonMenu>
        
    </div>
    <div class="demobottom"></div>
    
    <asp:Panel ID="description_HeaderPanel" runat="server" style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Description_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg" AlternateText="collapse"  />
            ButtonMenu Description
        </div>
    </asp:Panel>
    <asp:Panel id="description_ContentPanel" runat="server" style="overflow:hidden;">
        <p>
            The ButtonMenu is a web control that allow you to associate a popup on button's click.
        </p>
    </asp:Panel>

    <asp:Panel ID="properties_HeaderPanel" runat="server" style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Properties_ToggleImage" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="expand"  />
            ButtonMenu Properties
        </div>
    </asp:Panel>
    <asp:Panel id="properties_ContentPanel" runat="server" style="overflow:hidden;" Height="0px">
        <p>The control above is initialized with this code. The <em>italic</em> properties are optional:</p>
<pre>&lt;myajaxToolkit:ButtonMenu
    <em>ID</em>="MyButtonMenu"
    runat="Server"
    <em>PositioningMode</em>="BottomLeft"
    ParentElementID="Button1"
    TargetControlID="Menu1"
&lt;/myajaxToolkit:ButtonMenu&gt;</pre>
        <ul>
            <li><strong>TargetControlID</strong> - The ID of the control to display</li>
            <li><strong>ParentElementID</strong> - The ID of the button to attach to</li>
            <li><strong>PositioningMode</strong> - Optional setting specifying where the popup should be
                positioned relative to the target control. (Absolute, Center, BottomLeft, BottomRight,
                TopLeft, TopRight, Right, Left)</li>
        </ul>        
    </asp:Panel>
  
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeDescription" runat="Server" 
        TargetControlID="description_ContentPanel"
        ExpandControlID="description_HeaderPanel"
        CollapseControlID="description_HeaderPanel"
        Collapsed="False" 
        ImageControlID="description_ToggleImage" />
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeProperties" runat="Server" 
        TargetControlID="properties_ContentPanel"
        ExpandControlID="properties_HeaderPanel"
        CollapseControlID="properties_HeaderPanel"
        Collapsed="True" 
        ImageControlID="properties_ToggleImage" />
 
</asp:Content>